<template>
    <div>
        <!-- 注册 第一步 -->
        <!-- 顶部导航 -->
        <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" title="京东注册页" />
        <!-- 表单 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="tel" name="tel" label="请输入手机号" :rules="telRules" @input="fn" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :disabled="use" id="submit" @click="Dialog">
                    下一步
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script setup lang="ts">
// 引入弹出层函数组件
import { Dialog } from 'vant';
import dialog from 'vant/lib/dialog';
import { ref, reactive, computed, watchEffect, defineProps, defineEmits, watch, } from 'vue'
// 引入注册对应的Pinia仓库
import { useregisterStore } from '@/store/useregisterStore'
// 引入验证手机号是否被注册的接口
import { checkTelApi } from '@/api/registApi'
import { useRouter } from 'vue-router'
const router = useRouter()
// 使用pinia
const registerStore = useregisterStore()
// tel为表单输入双向绑定的数据
let tel = ref('')
// 定义一个show用来改变button按钮禁用状态，默认为禁用
const use = ref(true)
// 定义一个手机号的正则规则校验数组
let telRules: Array<any> = [
    {
        required: true,
        message: '手机号不能为空',
        trigger: 'blur',
    },
    {
        // 通过函数进行校验，可以返回一个 Promise 来进行异步校验,返回值是true或者false
        validator: (value: string) => {
            return /^1[3456789]\d{9}$/
                .test(value)
        },
        message: '请输入正确的手机号格式',
        trigger: 'onChange',
    }]

// 定义一个用来判断按钮禁用状态的函数，当表单的input事件触发时，调用该函数
const fn = () => {
    if (telRules[1].validator(tel.value)) {
        use.value = false
    } else {
        use.value = true
    }

}

let onSubmit = () => { }
interface telinfo{
    tel:string
}

let Dialog = () => {
    let value:telinfo={
        tel:tel.value
    }
    checkTelApi(value).then((res:any) => {
        console.log('手机号是否被注册', res);
        console.log(value);
        
        if (res.code == 200) {
            dialog.confirm({
                title: '标题',
                message:
                    `将向手机号${tel.value}发送验证码`,
            })
                .then(() => {
                    // on confirm点击下一步的时候
                    // 将tel存到Pinia中，跳转到step2页面
                    registerStore.setTel(tel.value)
                    router.push('/register/step2')
                })
                .catch(() => {
                    // on cancel
                });
        }

    })

}

</script>
<style scoped lang="scss">
.van-form {
    width: 90%;
    height: 500px;
    margin: 60px auto;

    .van-field {
        padding: 10px 16px;
    }

    .van-button {
        background-color: #D30707;
        border: #D30707;
        margin-top: 60px;
    }
}
</style>